<template>
  <!--<div class="data-show" @touchstart="gestureForPage.touchStart($event)" @touchmove="gestureForPage.touchMoving($event)" @touchend="gestureForPage.touchEnd($event)">-->
  <div class="data-show">
    <div style="width: 100%;word-break: break-word; word-wrap:break-spaces;overflow: hidden;">
      <!--<div v-html="gestureMD" class="markdown"></div>-->
      <div class="data-show-box">
        设备信息：<br>{{userAgent}}
        {{$refs.testPage}}
      </div>
      <div class="data-show-box" v-if="gestureForPage">
        起始坐标:{{JSON.stringify(gestureForPage.startPoint)}}<br>
        当前坐标:{{JSON.stringify(gestureForPage.currentPoint)}}<br>
        触点数量:{{JSON.stringify(gestureForPage.touchingPoint)}}<br>
        <span style="color: red;">动作识别:{{gestureWord}}</span>
      </div>
      <div class="user-test-area" ref="testPage">
        可在此区域滑动测试
      </div>
      <div class="markdown">
        <pre>
          <code>
            {{template1}}
          </code>
        </pre>
      </div>

    </div>
    <!--<div class="pie" style=""></div>-->
  </div>
</template>

<script lang="js">
import showdown from 'showdown'
import readme from '../../../static/markdown/INTERVAL.md'
// import readme from '../../../README.md'
import {Gesture} from '../../tools/gesture'
import {lazyEvent} from '../../tools/lazyEvent.js'

export default {
  name: 'gestureUseCase',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      gestureForPage: null,
      userAgent: navigator.userAgent,
      gestureMD: readme,
      gestureMDH: '',
      template1: '',
      gestureWord: ''
    }
  },
  methods: {
    updateLog (val) {
      this.gestureWord = val
      console.log(val)
    },
    waitDom () {
      let self = this
      return new Promise((resolve, reject) => {
        const timer = setInterval(() => {
          if (self.$refs.testPage) {
            resolve()
            clearInterval(timer)
          }
        }, 500)
      })
    },
    initGesture () {
      let gestureForPage = new Gesture(this.$refs.testPage)
      gestureForPage.swipeRight = () => this.updateLog('右划了')
      gestureForPage.swipeLeft = () => this.updateLog('左滑了')
      gestureForPage.longSwipeRight = () => this.updateLog('long右划了')
      gestureForPage.longSwipeLeft = () => this.updateLog('long左滑了')

      this.gestureForPage = gestureForPage
      // this.$refs.userAgent.addEventListener('touchstart',(e) => e.stopPropagation())
      // this.$refs.userAgent.addEventListener('touchmove',(e) => e.stopPropagation())
      // this.$refs.userAgent.addEventListener('touchend',(e) => e.stopPropagation())
    },
    initMarkDown () {
      let converter = new showdown.Converter()
      let text = this.gestureMD.toString()
      this.gestureMDH = converter.makeHtml(text)

      this.template1 = `let gestureForPage = new gesture(this.$refs.testPage)
      gestureForPage.swipeRight = () => this.updateLog('右划了')
    gestureForPage.swipeLeft = () => this.updateLog('左滑了')
    gestureForPage.longSwipeRight = () => this.updateLog('long右划了')
    gestureForPage.longSwipeLeft = () => this.updateLog('long左滑了')`
    }
  },
  components: {
    showdown
  },
  created () {

  },
  mounted () {
    this.waitDom().then(res => {
      this.initGesture()
      this.initMarkDown()
    })
    let databox = document.querySelector('.data-show')
    lazyEvent.throttle({
      dom: databox,
      eventName: 'scroll',
      delay: 500,
      event: res => {
        console.log(1)
      }
    })
  }
}
</script>

<style scoped lang="less">
  @import '../../../static/css/method.less';

  .data-show {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
  }

  /*.pie{*/
  /*width: 50px;*/
  /*height: 50px;*/
  /*border-radius: 50%;*/
  /*background-color: #6F9FD8;*/
  /*border-bottom: 50px solid #FC766A;*/
  /*border-top: 50px solid #F1DD61;*/
  /*border-right: 50px solid #A7CEB9;*/
  /*border-left: 50px solid #B9B7D4;*/
  /*position: absolute;*/
  /*left: 50%;*/
  /*top: 50%;*/
  /*transform: translateX(-50%) translateY(-50%) scale(1);*/
  /*}*/

  .user-test-area {
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    font-size: 24px;
    color: #ccc;
    .text-center-height(150px)
  }
</style>
